<template>
  <div id="app" :class="`${theme}-bg-ft`">
    <form @submit="handleSubmit" autocomplete="off">
      <textarea
        :rows="lastRow"
        placeholder="输入.."
        v-model="model"
        @keydown="handleEnter"
        :class="`${theme}-bg-ft`"
      ></textarea>

      <button
        class="mobile btn"
        :class="`${theme}-mobi-btn`"
        @click="handleSubmitNote"
      >
        提交
      </button>
    </form>

    <Note
      v-for="n in notes"
      :key="n.uuid"
      :note="n"
      @remove="handleNoteRemove"
    />

    <Command
      v-for="c in commands"
      :key="c.uuid"
      :content="c"
      @removeCommand="handleRemove"
      @modifyCommand="handleModify"
      :theme="theme"
    />
  </div>
</template>

<script>
import { load, write } from './store/store.js'
import Command from './components/Command.vue'
import Note from './components/Note.vue'
export default {
  components: {
    Command,
    Note
  },
  data () {
    return {
      model: '',
      commands: [],
      notes: [],
      theme: 'dark'

    }
  },
  methods: {
    handleSubmit (e) {
      this.commands = this.commands.reverse()
      this.commands.push({ uuid: this.uuidv4(), data: this.model + '' })
      write('commands', this.commands)
      this.refresh()
      this.model = ''
      e.preventDefault()
    },
    handleSubmitNote (e) {
      e.preventDefault()
      if (!/^\s*$/.test(this.model)) {
        this.notes = this.notes.reverse()
        this.notes.push({
          uuid: this.uuidv4(),
          data: this.model,
          unix: new Date(),
          status: true
        })
        write('notes', this.notes)
        this.refresh()
        this.model = ''
      }
    },
    handleEnter (e) {
      if (e.code === 'Enter' && !/^\s*$/.test(this.model)) {
        if (e.shiftKey === true) {
          this.handleSubmit(e)
        } else if (e.ctrlKey === true) {
          this.handleSubmitNote(e)
        }
      }
    },
    handleRemove (e) {
      this.commands = this.commands.filter(command => command.uuid !== e.uuid)
      write('commands', this.commands)
      this.refresh()
    },
    handleModify (e) {
      const command = this.commands.filter(command => command.uuid === e.uuid)
      this.model = command[0].data
    },
    handleNoteRemove (e) {
      this.notes.forEach(note => {
        if (note.uuid === e.uuid) { note.status = !note.status }
      })
      write('notes', this.notes)
    },
    uuidv4 () {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,
        c => {
          var r = (Math.random() * 16) | 0
          var v = c === 'x' ? r : (r & 0x3) | 0x8
          return v.toString(16)
        })
    },
    refresh () {
      this.commands = load('commands')
      this.notes = load('notes')

      this.notes = this.notes.filter(i => i.status === true)

      this.commands.reverse()
      this.notes.reverse()
    }
  },
  computed: {
    lastRow () {
      return (this.model.match(/\n|\r/g) || []).length + 1
    },
    themeName () {
      return this.theme === 'light' ? '白天' : '夜间'
    }
  },
  created () {
    if (!load('settings')) {
      write('commands', [])
      write('notes', [])
      write('settings', { initialized: true })
    }

    const theme = load('settings').theme
    if (theme === 'light' || theme === 'dark') {
      this.theme = theme
    } else {
      const now = new Date().getHours()
      this.theme = now > 7 && now < 19 ? 'light' : 'dark'
    }

    this.refresh()
  }
}
</script>

<style lang="scss">
@import "./style/theme";
.mobile {
  display: none;
}
* {
  box-sizing: border-box;
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-width: 100vw;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

form {
  padding-top: 20px;
}

textarea {
  font-size: 24px;
  min-height: 38px;
  padding: 0 18px 6px;
  width: 960px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  outline: none;
  resize: none;
}
@media (max-width: 500px) {
  .wrapper,
  form {
    width: 80vw;
  }
  .cmd-wrapper {
    display: none;
  }

  textarea {
    width: 100%;
  }

  .mobile {
    margin-top: 10px;
    display: block;
    width: 100%;
    outline: none;
    padding: 5px 0;

    box-shadow: 1px 2px 1px 1px rgb(119, 119, 119);
  }
  input[type="checkbox"] {
    transform: scale(1.25);
  }
}
</style>
